<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<style>
dt:nth-child(odd) {
	background-color: #ffffff;
}

dt:nth-child(even) {
	background-color: #F5F5F5;
	border-top: 1px solid !important;
	border-bottom: 1px solid !important;
}

.ui-datalist-item {
	padding: 10px;
}
</style>

	<script>
		function iniciarPartida() {
			jQuery(".iniciarPartida").hide();
			jQuery(".encerrar").hide();
			jQuery(".vtPrimeiroTempo").hide();
			jQuery(".fim").show();
			jQuery(".segundoTempo").show();
		}

		function handleMessage(data) {

			if (data == 1) {
				jQuery(".iniciarPartida").hide();
				jQuery(".encerrar").hide();
				jQuery(".segundoTempo").show();
				jQuery(".vtPrimeiroTempo").hide();
				jQuery(".fim").show();
			} else if (data == 2) {
				jQuery(".iniciarPartida").hide();
				jQuery(".encerrar").hide();
				jQuery(".segundoTempo").hide();
				jQuery(".vtPrimeiroTempo").show();
				jQuery(".fim").show();
			} else if (data == 3) {
				jQuery(".iniciarPartida").hide();
				jQuery(".encerrar").hide();
				jQuery(".segundoTempo").show();
				jQuery(".vtPrimeiroTempo").hide();
				jQuery(".fim").show();
			} else if (data == 4) {
				jQuery(".iniciarPartida").hide();
				jQuery(".encerrar").show();
				jQuery(".segundoTempo").hide();
				jQuery(".fim").hide();
				jQuery(".vtPrimeiroTempo").hide();
			} else if (data == 5) {
				jQuery(".iniciarPartida").show();
				jQuery(".encerrar").hide();
				jQuery(".segundoTempo").hide();
				jQuery(".vtPrimeiroTempo").hide();
				jQuery(".fim").hide();
			}

			atualizar();
		}
	</script>

</h:head>

<f:view>
	<h:body>
		<h:form id="form">

			<br />
			<br />

			<p:tabView id="tabView" style="width: 80%; margin:0 auto;">
				<p:tab id="tab1" title="Partida">
					<p:panelGrid style="margin-top:20px; margin:0 auto;" columns="2">

						<f:facet name="header">  
        CADASTRO DA PARTIDA  
    </f:facet>

						<p:outputLabel value="Campeonato: "></p:outputLabel>

						<p:selectOneMenu value="#{partidaBean.campeonato}"
							panelStyle="width: 250px;" effect="fade" var="p"
							style="width:500px" filter="true" filterMatchMode="startsWith">
							<f:selectItem itemLabel="Selecione o campeonato" itemValue="" />
							<f:selectItems value="#{partidaBean.campeonatos}" var="camp"
								itemLabel="#{camp.nome}" itemValue="#{camp.nome}" />
	                #{camp.nome}  
						</p:selectOneMenu>

						<p:outputLabel value="Time casa: "></p:outputLabel>

						<p:selectOneMenu value="#{partidaBean.timeCasa}"
							panelStyle="width: 250px;" effect="fade" var="a"
							style="width:500px" filter="true" filterMatchMode="startsWith">
							<f:selectItem itemLabel="Selecione o time" itemValue="" />
							<f:selectItems value="#{partidaBean.times}" var="tc"
								itemLabel="#{tc.nome}" itemValue="#{tc.nome}" />
	                #{tc.nome}  
						</p:selectOneMenu>

						<p:outputLabel value="Time visitante: "></p:outputLabel>

						<p:selectOneMenu value="#{partidaBean.timeVisitante}"
							panelStyle="width: 250px;" effect="fade" var="b"
							style="width:500px" filter="true" filterMatchMode="startsWith">
							<f:selectItem itemLabel="Selecione o time" itemValue="" />
							<f:selectItems value="#{partidaBean.times}" var="tv"
								itemLabel="#{tv.nome}" itemValue="#{tv.nome}" />
	                #{tv.nome}
						</p:selectOneMenu>


						<f:facet name="footer">
							<p:commandButton value="Iniciar Partida"
								styleClass="iniciarPartida"
								actionListener="#{partidaBean.cadastrarPartida}"
								oncomplete="iniciarPartida();" />
							<p:commandButton value="Primeiro Tempo"
								styleClass="vtPrimeiroTempo" style="display: none;"
								actionListener="#{partidaBean.voltarPrimeiroTempo}" />
							<p:commandButton value="Segundo Tempo" styleClass="segundoTempo"
								style="display: none;"
								actionListener="#{partidaBean.iniciarSegundoTempo}" />
							<p:commandButton value="Fim" styleClass="fim"
								style="display: none;"
								actionListener="#{partidaBean.anunciarFinalPartida}" />
							<p:commandButton value="Encerrar" styleClass="encerrar"
								style="display: none;"
								actionListener="#{partidaBean.encerrarPartida}" />
						</f:facet>

					</p:panelGrid>
				</p:tab>

				<p:tab id="tab2" title="Lances">

					<p:panelGrid style="margin-top:20px; margin:0 auto;" columns="2">

						<f:facet name="header">  
        CADASTRO DE LANCES  
    </f:facet>

						<p:outputLabel value="Lance:  "></p:outputLabel>
						<p:inputText id="comentario" value="#{partidaBean.comentario}"></p:inputText>

						<p:outputLabel value="Tipo do Lance: "></p:outputLabel>
						<p:selectOneMenu value="#{partidaBean.tipoLance}"
							panelStyle="width: 150px;" effect="fade" var="p"
							style="width:300px" filter="true" filterMatchMode="startsWith">
							<f:selectItem itemLabel="Selecione o tipo do lance"
								itemValue="Normal" />
							<f:selectItems value="#{partidaBean.tiposLance}" var="tl"
								itemLabel="#{tl}" itemValue="#{tl}" />
							<p:column>  
				                #{tl}
				            </p:column>
						</p:selectOneMenu>


						<p:outputLabel value="Tempo: "></p:outputLabel>
						<p:selectOneMenu value="#{partidaBean.tempo}"
							panelStyle="width: 150px;" effect="fade" var="p"
							style="width:300px" filter="true" filterMatchMode="startsWith">
							<f:selectItem itemLabel="Selecione o tipo do lance" itemValue="" />
							<f:selectItems value="#{partidaBean.tempoPartida}" var="t"
								itemLabel="#{t}" itemValue="#{t}" />
							<p:column>  
				                #{t}
				            </p:column>
						</p:selectOneMenu>

						<f:facet name="footer">
							<p:commandButton value="Enviar"
								actionListener="#{partidaBean.cadastrarLance}" />
						</f:facet>



					</p:panelGrid>

				</p:tab>
			</p:tabView>

			<br />
			<br />
			<br />


			<p:panel header="Acompanhamento da partida" id="acompPartida">
				<h:outputText value="Nenhuma partida iniciada até o momento"
					rendered="#{partidaBean.partida == null}" />

				<p:inputText type="hidden" value="#{partidaBean.indiceEditavel}" />
				<p:inputText type="hidden"
					value="#{partidaBean.tempoIndiceEditavel}" />

				<p:panel header="2 Tempo"
					rendered="#{partidaBean.numeroLancesSegundoTempo > 0}">
					<p:dataList value="#{partidaBean.partida.lancesSegundoTempo}"
						var="lancest" type="definition">  
				    #{lancest.tipo == 'Normal' ? '' : '[' } #{lancest.tipo == 'Normal' ? '' : lancest.tipo } #{lancest.tipo == 'Normal' ? '' :  ']' }
				     #{lancest.tempo}' - #{lancest.comentario}  
					</p:dataList>
				</p:panel>

				<br />
				<br />

				<p:panel header="1 Tempo"
					rendered="#{partidaBean.numeroLancesPrimeiroTempo > 0}">
					<p:dataList value="#{partidaBean.partida.lancesPrimeiroTempo}"
						var="lancept" type="definition">  
				    #{lancept.tipo == 'Normal' ? '' : '[' } #{lancept.tipo == 'Normal' ? '' : lancept.tipo } #{lancept.tipo == 'Normal' ? '' :  ']' }
				     #{lancept.tempo}' - #{lancept.comentario}  
					</p:dataList>
				</p:panel>
			</p:panel>

			<p:remoteCommand name="atualizar" update="acompPartida" />
		</h:form>

		<p:socket onMessage="handleMessage" channel="/cadastroPartida" />

	</h:body>
</f:view>
</html>